  
@-webkit-keyframes circle_right{
  0%{
      transform : rotate(-135deg);
  }
  50%,100%{
      transform : rotate(45deg);
  }
}
@-webkit-keyframes circle_left{
	0%,50%{
        transform : rotate(-135deg);
    }
	100%{
        transform : rotate(45deg);
    }
}
.circle-progress{
  position: relative;
}
.track{
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.circle-line{
  position: relative;
  width: inherit;
  height: inherit;
}

.right,&.left {
  position: absolute;
  top:0;
  overflow: hidden;
}
.right{
  right: 0;
}
.left{
  left: 0;
}
.circle{
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform: rotate(-135deg);
  box-sizing: border-box;
}
.rightcircle {
  right: 0;
}
.leftcircle {
  left: 0;
  
}